<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" prop="name" label="客户：">
							<el-input clearable class="input_right" v-model="addForm.customer"
									  disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="orderId" label="订单号：">
							<el-input clearable class="input_right" v-model="addForm.orderNum" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="type" label="订单类型：">
							<el-select clearable class="input_right" v-model="addForm.orderType" disabled>
								<el-option label="内销" value="内销"></el-option>
								<el-option label="外置" value="外置"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="formList" prop="state" label="订单状态：">
							<el-input clearable class="input_right" v-model="addForm.orderStatusCn" disabled></el-input>

						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="person" label="下单人：">
							<el-input clearable class="input_right" v-model="addForm.createUserName+' '+addForm.createTimeFt" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="person" label="确认人：">
							<el-input clearable class="input_right" v-model="addForm.sureUserName +''+addForm.sureTime"
									  disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div class="tableList">
					<table border="1">
						<tr>
							<th>品类</th>
							<th>产品名称</th>
							<th width="200">规格</th>
							<th>单件万支</th>
							<th>件数</th>
							<th>合计(万支)</th>
							<!--<th>单价</th>-->
							<!--<th>金额</th>-->
							<th>交货期(天)</th>
						</tr>
						<tr class="add_Table">
							<td>
								<el-select v-model="addForm.itemTypeId" placeholder="" class="text_center" clearable
										   disabled>
									<el-option v-for="(item,index) in items" :key="index" :label="item"
											   :value="item"/>
								</el-select>
							</td>
							<td>
								<el-input v-model="addForm.productName" placeholder="" class="text_center" clearable
										  :disabled="type == 'see'" @blur="handleblur(addForm.productName)"></el-input>
							</td>
							<td width="200">
								<el-input v-model="addForm.gradeValue" placeholder="" class="text_center" clearable
										  :disabled="type == 'see'"></el-input>
							</td>
							<td>
								<el-input @input="addForm.thNumber= addForm.thNumber.replace(/[^0-9\.]/g,'')" v-model="addForm.thNumber" placeholder="" class="text_center" clearable
										  :disabled="type == 'see'" @change="totalNumChange(addForm)"></el-input>
							</td>
							<td>
								<el-input @input="addForm.peieceNum=addForm.peieceNum.replace(/[^\d]/g,'')" v-model="addForm.peieceNum" placeholder="" class="text_center" clearable
										  disabled @change="totalNumChange(addForm)"></el-input>
							</td>
							<td>
								<el-input v-model="addForm.totalNum" placeholder="" class="text_center" clearable
										  disabled></el-input>
							</td>
							<!--<td>-->
								<!--<el-input  @input="addForm.price=addForm.price.replace(/[^0-9\.]/g,'')" v-model="addForm.price" placeholder="" class="text_center" clearable-->
										   <!--disabled @change="totalPriceChange(addForm)"></el-input>-->
							<!--</td>-->
							<!--<td>-->
								<!--<el-input v-model="addForm.totalPrice" placeholder="" class="text_center" clearable-->
										  <!--disabled></el-input>-->
							<!--</td>-->
							<td>
								<el-input @input="addForm.goodsDay=addForm.goodsDay.replace(/[^\d]/g,'')" v-model="addForm.goodsDay" placeholder="" class="text_center" clearable
										  disabled></el-input>
							</td>

						</tr>
					</table>
				</div>
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" prop="" label="备注：">
							<el-input clearable class="input_right" v-model="addForm.remark"
									  disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<div>
					<div class="gradeStyle" v-for="item in result" :key="item">{{item.gradeName}}    <div style="margin-left: 20px;">{{item.gradeValue}}</div>  <span @click="addCopy(item.gradeValue)">复制</span></div>
					
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
	import {getStore} from "@/plugins/localStore";
	import {formatDate} from "@/plugins/formatDate";

	export default {
		props: ['editData', 'type', 'selectItems'],
		data() {
			return {
				addForm: {
					id:'',
					orderNum:'',
					itemTypeId:'',
					productName:'',
					gradeValue:'',
					thNumber:'',
					peieceNum:'',
					totalNum:'',
					price:'',
					totalPrice:'',
					goodsDay:'',
					remark:'',
					createUserId:'',
					createUserName:'',
					createTimeFt:'',
					orderType:'',
					customer:'',
					orderStatus:'',
					orderStatusCn:'',
					sureUserName:'',
					sureTime:'',
				},
				rules: {

				},
				items: [],
				count: 0,
				user: {},
				result:[]
			}
		},
		methods: {
			addCopy(val) {
				const oInput = document.createElement('input')
				oInput.value = val
				document.body.appendChild(oInput)
				oInput.select()
				document.execCommand('Copy')
				this.$message({
					message: '复制成功',
					type: 'success'
				});
				oInput.remove()
			},
			handleblur(val){
				if(val==''){
					this.result = [];
					return false
				}
				let self = this;
				self.$http({
					url: "/jinl/plan/getGradeValueByName",
					method: "post",
					data: JSON.stringify({name:val}),
						dataType: 'json',
						contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.result = resp.result;
					}else{
						self.result = [];
					}
				});
			},
			totalNumChange(item){
				if(item.peieceNum && item.thNumber){
					let totalNum = parseFloat(item.peieceNum) *   parseFloat(item.thNumber);
					item.totalNum = totalNum.toFixed(4);
					let totalPrice = parseFloat(item.price) *   parseFloat(item.totalNum);
					item.totalPrice = totalPrice.toFixed(2);
				}else{
					item.totalNum = '';
					item.totalPrice = '';
				}
			},

			totalPriceChange(item){
				if(item.totalNum && item.price){
					let totalPrice = parseFloat(item.price) *   parseFloat(item.totalNum);
					item.totalPrice = totalPrice.toFixed(2);
				}else{
					item.totalPrice = '';
				}
			},

			submitForm(val) {
				let self = this;
				self.$refs["addForm"].validate((valid) => {
					if (valid) {
						self.addForm.gradeValue = self.addForm.gradeValue.trim();
						if(!self.addForm.gradeValue){
							self.$message.warning('请输入规格！');
							return;
						}
						if(!self.addForm.thNumber){
							self.$message.warning('请输入单件万支！');
							return;
						}
						if(!self.addForm.productName){
							self.$message.warning('请输入产品名称！');
							return;
						}
						self.operate(val);
					} else {
						return false;
					}
				});
			},

			operate() {
				let self = this;
				let params = {thNumber:self.addForm.thNumber,productName:self.addForm.productName,gradeValue:self.addForm.gradeValue,id:self.addForm.id,sureUserName:self.addForm.userName,sureTime:self.addForm.sureTime};
				if (self.count == 0) {
					self.$http({
						url: '/jinl/order/updateSureOrder',
						method: "post",
						data: JSON.stringify(params),
						dataType: 'json',
						contentType: "application/json",
					}).then(resp => {
						if (resp.success) {
							self.$notify({title: '提示', message: "操作成功！", type: 'success'});
							self.count--;
							self.$eventBus.$emit("updatePlanOrderList");
							self.$eventBus.$emit("getOrderPlanNum");
							return;
						}
						self.$notify({title: '提示', message: resp.message, type: 'error'});
						self.count--;
					});
					self.count++;
				}
			},
		},
		watch: {
			selectItems(val) {
				this.items = val;
				console.log('---this.items----')
				console.log(this.items)
			},
			editData(val) {
				console.log(val)
				this.user = getStore();
				this.count = 0;
				for (let key in  this.addForm) {
					this.addForm[key] = val[key] || ''
				}
				if(this.type !='see'){
					this.addForm.sureUserName = this.user.userName;
					this.addForm.sureTime = formatDate(new Date(), 'yyyy-MM-dd');
				}
			},

		},
		mounted() {

		},
		components: {}
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.business-workAdd.addProject {
		.tableList {
			margin-top: 0;

			table {
				table-layout: auto;

				tr {
					background: #fff !important;

					td {
						padding: 1px 3px;
					}

					&.noData {
						color: #999;
						height: 40px;
					}
				}

				.edit {
					color: #1890ff;
					padding: 0 5px;
					cursor: pointer;

					&.icons {
						font-size: 16px;
					}

					&:hover {
						opacity: .7;
					}
				}
			}
		}
	}
	.gradeStyle{
		color: #666;
		font-size: 14px;
		margin-bottom: 10px;
		display: flex;
		span{
			margin-left: 20px;
			cursor: pointer;
			color: #999;
		}
	}
</style>